<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="soccer.css" />
  </head>

  <body>
    <h2>Place superheroes around the soccer field.</h2>

    <p>
      Superheroes and the ball are elements with the class "draggable". Make
      them really draggable.
    </p>

    <p>
      Important: limit dragging by the window. If a draggable reaches window top
      or bottom, then the page should scroll to let us drag it further.
    </p>

    <p>
      If your screen is big enough to fit the whole document -- make the window
      smaller to get vertical scrolling, so that you could test it.
    </p>

    <p>
      In this task it's enough to handle vertical scrolling. There's no
      horizontal scrolling usually, and it's handled the similar way if needed.
    </p>

    <p>
      And one more thing: heroes may never leave the page. If they reach the
      edge of the document, no dragging outside of it.
    </p>

    <select id="genres">
      <option value="rock">Rock</option>
      <option value="blues" selected>Blues</option>
    </select>

    <div id="field"></div>

    <div class="hero draggable" id="hero1"></div>
    <div class="hero draggable" id="hero2"></div>
    <div class="hero draggable" id="hero3"></div>
    <div class="hero draggable" id="hero4"></div>
    <div class="hero draggable" id="hero5"></div>
    <div class="hero draggable" id="hero6"></div>

    <img src="https://en.js.cx/clipart/ball.svg" class="draggable" />

    <div style="clear: both"></div>

    <script src="soccer.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        console.log("DOMContentLoaded");
        console.log(document.getElementsByTagName("img")[0].clientWidth);
        console.log(document.getElementsByTagName("img")[0].scrollHeight);
      });
      window.onload = function () {
        console.log("onload");
      };
      document.addEventListener("readystatechange", () =>
        console.log(document.readyState)
      );
    </script>
  </body>
</html>
